<template>
  <el-container class="goods-view panel-block">
    <el-container class="goods-index-main">
      <el-aside>
        <el-scrollbar height="100%">
          <div
            class="category-all sa-flex sa-row-between"
            :class="filterParams.data.category_ids == 'all' ? 'is-active' : ''"
            @click.stop="onChangeCategoryIds()"
          >
            <span>全部商品</span>
            <span @click.stop="onFold">折叠</span>
          </div>
          <el-tree
            ref="treeRef"
            :class="filterParams.data.category_ids"
            :data="category.select"
            :props="{
              label: 'name',
            }"
            :expand-on-click-node="false"
            node-key="id"
            :current-node-key="filterParams.data.category_ids"
            :indent="12"
            :default-expanded-keys="defaultExpandedKeys"
            @node-click="onChangeCategoryIds"
          >
            <template #default="{ node, data }">
              <div>
                <div class="name">{{ node.label }}</div>
                <div v-if="(node.level = 1)" class="goods mt-1">
                  <span v-if="data.children?.length" style="font-size: 0.8rem;"> 子分类{{ data.children.length }} </span>
                </div>
              </div>
            </template>
          </el-tree>
        </el-scrollbar>
      </el-aside>
      <el-container class="sa-p-r-16 sa-p-l-16">
        <el-header class="sa-header">
          <el-tabs class="sa-tabs" v-model="filterParams.data.status" @tab-change="getData(1)">
            <el-tab-pane
              v-for="sl in statusList.data"
              :key="sl"
              :label="sl.name"
              :name="sl.type"
            ></el-tab-pane>
          </el-tabs>
          <div class="sa-title sa-flex sa-row-between">
            <div class="label sa-flex">
              <span class="left">商品列表</span>
              <search-condition
                :conditionLabel="filterParams.conditionLabel"
                @deleteFilter="deleteFilter"
              ></search-condition>
            </div>
            <div>
              <el-button
                class="sa-button-refresh"
                icon="RefreshRight"
                @click="getData()"
              ></el-button>
              <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
              <el-button
                v-auth="'shop.admin.goods.goods.add'"
                icon="Plus"
                type="primary"
                @click="addRow"
                >新建</el-button
              >
              <el-button
                v-auth="'shop.admin.goods.goods.recyclebin'"
                type="danger"
                icon="Delete"
                plain
                @click="openRecyclebin"
                >回收站</el-button
              >
            </div>
          </div>
        </el-header>
        <el-main class="sa-p-0">
          <div class="sa-table-wrap" v-loading="loading">
            <el-table
              height="100%"
              class="sa-table"
              :data="table.data"
              @selection-change="changeSelection"
              @sort-change="fieldFilter"
              @row-dblclick="editRow"
              :expand-row-keys="expandRowKeys"
              row-key="id"
              stripe
            >
              <template #empty>
                <sa-empty></sa-empty>
              </template>
              <el-table-column type="expand">
                <template #default="props">
                  <el-table class="sa-table sa-expand-table" :data="skuPrice.data" stripe>
                    <el-table-column width="96"></el-table-column>
                    <el-table-column prop="id" label="ID" min-width="80"></el-table-column>
                    <el-table-column label="商品" min-width="440">
                      <template #default="scope">
                        <div class="sa-flex sa-m-l-16">
                          <sa-preview
                            :url="scope.row.image || props.row.image"
                            size="32"
                          ></sa-preview>
                          <div class="sku-text sa-m-l-28">
                            {{ scope.row.goods_sku_text?.join('/') }}
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格"
                      min-width="150"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="sales"
                      label="销量"
                      min-width="100"
                      align="center"
                    ></el-table-column>
                    <el-table-column label="浏览量" min-width="100" align="center">
                      <template #default="scope">{{ scope.row.views || '-' }}</template>
                    </el-table-column>
                    <el-table-column prop="stock" label="库存" min-width="100" align="center" />
                    <el-table-column label="来源" min-width="100" align="center">
                      <template #default="scope">{{ scope.row.from || '-' }}</template>
                    </el-table-column>
                    <el-table-column label="更新时间" width="172">
                      <template #default>-</template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="240">
                      <template #default="scope">
                        <el-button v-auth="'shop.admin.goods.skuprice.edit'" link>
                          <el-dropdown popper-class="goods-dropdown" @command="handleSkuCommand">
                            <el-tag :type="statusList.color[scope.row.status]">
                              <span>{{ scope.row.status_text }}</span>
                              <el-icon class="sa-m-l-4">
                                <ArrowDown />
                              </el-icon>
                            </el-tag>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item
                                  :command="{
                                    goodsId: props.row.id,
                                    id: scope.row.id,
                                    type: 'up',
                                  }"
                                >
                                  <span class="status-up">上架</span>
                                </el-dropdown-item>
                                <el-dropdown-item
                                  :command="{
                                    goodsId: props.row.id,
                                    id: scope.row.id,
                                    type: 'down',
                                  }"
                                >
                                  <span class="status-down">下架</span>
                                </el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column type="selection" width="48" align="center"></el-table-column>
              <el-table-column
                sortable="custom"
                prop="id"
                label="ID"
                min-width="80"
              ></el-table-column>
              <el-table-column label="商品" min-width="440">
                <template #default="scope">
                  <goods-item
                    :goods="{
                      image: scope.row.image,
                      title: scope.row.title,
                      subtitle: scope.row.subtitle,
                      activities: scope.row.activities,
                      promos: scope.row.promos,
                    }"
                    mode="goods"
                  ></goods-item>
                </template>
              </el-table-column>
              <el-table-column
                sortable="custom"
                prop="price"
                label="价格"
                min-width="150"
                align="center"
              >
                <template #default="scope">
                  <div>{{ scope.row.price?.join('~') || 0 }}</div>

                  <div class="sku" v-if="scope.row.is_sku" @click.stop="expandRow(scope.row.id)">
                    <span>多规格</span>
                    <el-icon
                      :class="[
                        'expand-arrow sa-m-l-4',
                        expandRowKeys.includes(scope.row.id)
                          ? 'expand-arrow-up'
                          : 'expand-arrow-down',
                      ]"
                    >
                      <ArrowDown />
                    </el-icon>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                sortable="custom"
                prop="sales"
                label="销量"
                min-width="100"
                align="center"
              ></el-table-column>
              <el-table-column
                sortable="custom"
                prop="views"
                label="浏览量"
                min-width="100"
                align="center"
              ></el-table-column>
              <el-table-column label="库存" min-width="100" align="center">
                <template #default="scope">
                  <div class="sa-flex sa-row-center stock">
                    <span>{{ scope.row.stock || 0 }}</span>
                    <el-button v-auth="'shop.admin.goods.goods.addstock'" class="add-stock" link>
                      <sa-icon name="sa-shop-goods-add-stock" @click="editStock(scope.row)" />
                    </el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="来源" min-width="100" align="center">
                      <template #default="scope">{{ scope.row.from || '-' }}</template>
                    </el-table-column>
              <el-table-column label="更新时间" width="172">
                <template #default="scope">{{ scope.row.create_time || '-' }}</template>
              </el-table-column>
              <el-table-column label="操作" min-width="240" fixed="right">
                <template #default="scope">
                  <div class="sa-flex">
                    <el-button v-auth="'shop.admin.goods.goods.edit'" link>
                      <el-dropdown popper-class="goods-dropdown" @command="handleCommand">
                        <el-tag :type="statusList.color[scope.row.status]">
                          <span>{{ scope.row.status_text }}</span>
                          <el-icon class="sa-m-l-4">
                            <ArrowDown />
                          </el-icon>
                        </el-tag>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item
                              :command="{
                                id: scope.row.id,
                                type: 'up',
                              }"
                            >
                              <span class="status-up">上架</span>
                            </el-dropdown-item>
                            <el-dropdown-item
                              :command="{
                                id: scope.row.id,
                                type: 'down',
                              }"
                            >
                              <span class="status-down">下架</span>
                            </el-dropdown-item>
                            <el-dropdown-item
                              :command="{
                                id: scope.row.id,
                                type: 'hidden',
                              }"
                            >
                              <span class="status-hidden">隐藏</span>
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </el-button>
                    <el-button
                      v-auth="'shop.admin.goods.goods.detail'"
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="editRow(scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      v-auth="'shop.admin.goods.goods.add'"
                      class="is-link sa-m-l-12"
                      type="primary"
                      @click="onCopy(scope.row.id)"
                      >复制</el-button
                    >
                    <el-popconfirm
                      width="fit-content"
                      confirm-button-text="确认"
                      cancel-button-text="取消"
                      title="确认删除这条记录?"
                      @confirm="deleteRow(scope.row.id)"
                    >
                      <template #reference>
                        <el-button
                          v-auth="'shop.admin.goods.goods.delete'"
                          class="is-link"
                          type="danger"
                        >
                          删除
                        </el-button>
                      </template>
                    </el-popconfirm>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-footer class="goods-index-footer">
      <sa-view-bar>
        <template #left>
          <sa-batch-handle
            :batchHandleTools="batchHandleTools"
            :selectedLeng="table.selected.length"
            @batchHandle="batchHandle"
          ></sa-batch-handle>
        </template>
        <template #right>
          <sa-pagination :pageData="pageData" @updateFn="getData" />
        </template>
      </sa-view-bar>
    </el-footer>
    <el-dialog
    v-model="dialogVisible"
    title="设置分佣比例"
    width="500"
    :before-close="handleClose"
  >
  <el-input v-model="selectStore.commission_money_rate" placeholder="请输入社群分佣比例" class="sa-w-300" type="number"
              :step="0.01" :min="0" :precision="2">
              <template #append>%</template>
            </el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="surecommission()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.goods.goods',
  };
</script>
<script setup>
  import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
  import { api } from '../goods.service';
  import { api as categoryApi } from '@/app/shop/admin/category/category.service';
  import { ElMessageBox } from 'element-plus';
  import { useModal, usePagination } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import { useRouter } from 'vue-router';
  import GoodsItem from '@/app/shop/components/goods-item.vue';
  import GoodsEdit from './edit.vue';
  import GoodsRecyclebin from './recyclebin.vue';
  import GoodsStock from './stock.vue';
  import SelfSearch from './search.vue';
  import { cloneDeep } from 'lodash';
  import{ElMessage} from 'element-plus';
  const { proxy } = getCurrentInstance();

  const router = useRouter();
  // getType
  const statusList = reactive({
    data: [],
    color: {
      all: '',
      up: 'success',
      down: 'danger',
      hidden: 'info',
    },
  });
  async function getType() {
    const { data } = await api.goods.getType();
    for (var key in filterParams.tools) {
      if (filterParams.tools[key].field == 'activity_type') {
        filterParams.tools[key].options.data = data.activity_type;
      }
    }
    statusList.data = data.status;
  }

  const category = reactive({
    select: [],
  });
  async function getCategory() {
    const { data } = await categoryApi.goodsSelect();
    category.select = data;
    // for (var key in filterParams.tools) {
    //   if (filterParams.tools[key].field == 'category_ids') {
    //     filterParams.tools[key].options.data = data;
    //   }
    // }
  }
  const filterParams = reactive({
    tools: {
      status: { label: '商品状态', value: '' },
      keyword: {
        type: 'tinputprepend',
        placeholder: '请输入查询内容',
        field: 'keyword',
        keyword: {
          field: 'id',
          value: '',
        },
        options: [
          {
            label: '商品ID',
            value: 'id',
          },
          {
            label: '商品名称',
            value: 'title',
          },
          {
            label: '商品副标题',
            value: 'subtitle',
          },
        ],
      },
      // category_ids: {
      //   type: 'tcascader',
      //   label: '商品分类',
      //   field: 'category_ids',
      //   value: [],
      //   options: {
      //     data: [],
      //     props: {
      //       children: 'children',
      //       label: 'name',
      //       value: 'id',
      //       checkStrictly: true,
      //       emitPath: false,
      //       multiple: true,
      //     },
      //   },
      // },
      activity_type: {
        type: 'tselect',
        label: '活动类型',
        field: 'activity_type',
        value: '',
        options: {
          data: [],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      is_supply: {
        type: 'tselect',
        label: '供应链商品',
        field: 'is_supply',
        value: '',
        options: {
          data: [
            { name: '否', type: 0 },
            { name: '是', type: 1 },
          ],
          props: {
            label: 'name',
            value: 'type',
          },
        },
      },
      price: { label: '价格区间', value: { min: '', max: '' } },
      sales: { label: '销量区间', value: { min: '', max: '' } },
    },
    data: {
      status: 'all',
      keyword: { field: 'id', value: '' },
      category_ids: 'all',
      activity_type: '',
      price: { min: '', max: '' },
      sales: { min: '', max: '' },
      is_supply:0
    },
    conditionLabel: {},
  });
  const { openFilter, deleteFilter } = useSearch({
    comp: SelfSearch,
    filterParams,
    getData,
  });

  const loading = ref(true);

  // 表格
  const table = reactive({
    data: [],
    order: 'desc',
    sort: 'id',
    selected: [],
  });

  const { pageData } = usePagination();

  // 获取数据
  async function getData(page) {
    loading.value = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    if (tempSearch.price.min && tempSearch.price.max) {
      tempSearch.price = `${tempSearch.price.min} - ${tempSearch.price.max}`;
    }
    if (tempSearch.sales.min && tempSearch.sales.max) {
      tempSearch.sales = `${tempSearch.sales.min} - ${tempSearch.sales.max}`;
    }
    const { is_supply, ...filteredTempSearch } = tempSearch;
    let search = composeFilter(filteredTempSearch, {
      title: 'like',
      subtitle: 'like',
      // category_ids: {
      //   spacer: ',',
      // },
      price: 'between',
      sales: 'between',
    });
    let searchData={
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
      order: table.order,
      sort: table.sort,
    }
    if(is_supply==1){
      searchData={
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
      order: table.order,
      sort: table.sort,
      is_selected:0,
      store_id:0
    }
    }
    else{
      searchData={
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
      order: table.order,
      sort: table.sort,
    }
    }

    const { error, data } = await api.goods.list(searchData);
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
      if (expandRowKeys.length > 0) {
        getSkuPrice(expandRowKeys[0]);
      }
    }
    loading.value = false;
  }

  // table 字段排序
  function fieldFilter({ prop, order }) {
    table.order = order == 'ascending' ? 'asc' : 'desc';
    table.sort = prop;
    getData();
  }

  // table 批量选择
  function changeSelection(row) {
    table.selected = row;
  }
  const selectStore=reactive({
    selectIds:[],
    commission_money_rate:''
  })
  const dialogVisible=ref(false)
  // 批量操作
  const batchHandleTools = [
    {
      type: 'delete',
      label: '删除',
      auth: 'shop.admin.goods.goods.delete',
      class: 'danger',
    },
    {
      type: 'up',
      label: '上架',
      auth: 'shop.admin.goods.goods.edit',
      class: 'success',
    },
    {
      type: 'down',
      label: '下架',
      auth: 'shop.admin.goods.goods.edit',
      class: 'danger',
    },
    {
      type: 'hidden',
      label: '隐藏',
      auth: 'shop.admin.goods.goods.edit',
      class: 'info',
    },
    {
      type: 'select',
      label: '加入供应链',
      auth: 'shop.admin.goods.goods.edit',
      class: 'info',
    },
  ];

  const handleClose=()=>{
    dialogVisible.value=false
    selectStore.commission_money_rate=""
  }
  const surecommission=async()=>{
    if(selectStore.commission_money_rate==""){
      ElMessage.error("请输入佣金比例")
      return
    }
    if(selectStore.selectIds.length==0){
      ElMessage.error("当前选择没有符合的数据")
      return
    }
    const {error,data}  = await api.selectGoods({
      id:selectStore.selectIds,
      commission_money_rate:selectStore.commission_money_rate
    })
    if(error==0){
      ElMessage.success("操作成功")
      handleClose()
      getData()

    }
    
  }
  async function batchHandle(type) {
    let ids = [];
    table.selected.forEach((row) => {
    ids.push(row.id);
   
});
    switch (type) {
      case 'delete':
        ElMessageBox.confirm('此操作将删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteRow(ids.join(','));
        });
        break;
        case'select':
        table.selected.forEach((row) => {
  if (row.price_type === 0 && (row.store_id === 0 || row.store_id === 2114) && row.is_selected === 0) {
    console.log('符合条件的行:', row);
    selectStore.selectIds.push(row.id);
  }
});
        dialogVisible.value=true
        break;
      default:
        handleCommand({ id: ids.join(','), type: type });
    }
  }

  function addRow() {
    useModal(
      GoodsEdit,
      {
        title: '添加商品',
        type: 'add',
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }
  function editRow(row) {
    useModal(
      GoodsEdit,
      {
        title: '编辑',
        type: 'edit',
        id: row.id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }
  function onCopy(id) {
    useModal(
      GoodsEdit,
      {
        title: '复制',
        type: 'copy',
        id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }
  async function deleteRow(id) {
    await api.goods.delete(id);
    getData();
  }
  function openRecyclebin() {
    useModal(
      GoodsRecyclebin,
      {
        title: '回收站',
      },
      {
        confirm: () => {
          getData();
        },
        close: () => {
          getData();
        },
      },
    );
  }

  let expandRowKeys = reactive([]);
  function expandRow(id) {
    skuPrice.data = [];
    if (expandRowKeys.includes(id)) {
      expandRowKeys.length = 0;
    } else {
      expandRowKeys.length = 0;
      expandRowKeys.push(id);
      getSkuPrice(id);
    }
  }

  const skuPrice = reactive({
    data: [],
  });
  async function getSkuPrice(id) {
    const { data } = await api.goods.getSkuPrice(id);
    skuPrice.data = data;
  }
  async function handleCommand(e) {
    await api.goods.edit(e.id, {
      status: e.type,
    });
    getData();
  }
  async function handleSkuCommand(e) {
    await api.goods.updateSkuPrice(e.id, e.type);
    getSkuPrice(e.goodsId);
  }

  function jumpAc(data) {
    router.push({
      path: '/shop/admin/activity/list',
      query: {
        type: data.type,
      },
    });
  }

  function editStock(row) {
    useModal(
      GoodsStock,
      {
        title: '补充库存',
        id: row.id,
        stock: row.stock || 0,
        is_sku: row.is_sku,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  function onChangeCategoryIds(val) {
    filterParams.data.category_ids = val?.id || 'all';
    pageData.page = 1;
    getData();
  }

  const defaultExpandedKeys = ref([]);
  function onFold() {
    for (var key in proxy.$refs.treeRef.store.nodesMap) {
      proxy.$refs.treeRef.store.nodesMap[key].expanded = false;
    }
    defaultExpandedKeys.value = [];
  }

  onMounted(() => {
    getCategory();
    getType();
    getData();
  });
</script>
<style lang="scss">
  .goods-dropdown {
    .status-up {
      color: var(--el-color-success);
    }
    .status-down {
      color: var(--el-color-danger);
    }
    .status-hidden {
      color: var(--el-color-info);
    }
  }
</style>
<style lang="scss" scoped>
  .goods-view {
    margin: 0 -16px;
    .el-main {
      .sa-table-wrap {
        margin-left: -48px;
        overflow: hidden;
        height: 100%;
        :deep() {
          .el-table__empty-text {
            margin-left: 48px;
          }
        }
        .title {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: var(--sa-font);
        }
        .subtitle {
          height: 16px;
          line-height: 16px;
          font-size: 12px;
          color: var(--sa-subfont);
        }
        .goods-tag {
          max-width: 76px;
          padding: 3px 8px;
          border-radius: 10px;
          line-height: 14px;
          font-size: 12px;
          font-weight: 400;
          margin-right: 8px;
          cursor: pointer;
          &:last-of-type {
            margin-right: 0;
          }
          &.promos-goods {
            color: #faad14;
            background: rgba(250, 173, 20, 0.16);
          }
          &.groupon_ladder-goods,
          &.groupon-goods {
            color: var(--el-color-primary);
            background: var(--t-bg-active);
          }
          &.seckill-goods {
            color: #ff4d4f;
            background: rgba(255, 77, 79, 0.16);
          }
        }
        .sku {
          width: fit-content;
          height: 20px;
          line-height: 1;
          display: inline-flex;
          align-items: center;
          padding: 0 8px;
          font-size: 12px;
          color: #fff;
          background: var(--el-color-primary);
          border-radius: 10px;
          cursor: pointer;
        }
        .stock {
          cursor: pointer;
          .add-stock {
            margin-left: 8px;
            color: var(--el-color-primary);
          }
        }
        .el-tag {
          padding: 0 8px;
          border: none;
          cursor: pointer;
          :deep() {
            .el-tag__content {
              display: flex;
              align-items: center;
            }
          }
        }
      }
      .sa-expand-table {
        :deep() {
          .el-table__header-wrapper {
            display: none;
          }
        }
        .sku-text {
          font-size: 12px;
          color: var(--sa-font);
        }
      }
    }
    .expand-arrow {
      color: #fff !important;
    }

    .goods-index-main {
      overflow: hidden;
    }

    .el-aside {
      --el-aside-width: 161px;
      border-right: 1px solid var(--sa-border);
      padding: 0 3px;
    }

    .el-aside .category-all {
      line-height: 48px;
      border-radius: 4px;
      padding: 0 12px;
      position: relative;
      cursor: pointer;
      font-size: 14px;
      color: var(--sa-title);
    }

    .el-aside .category-all span:last-child {
      color: var(--el-color-primary);
    }

    .el-aside .category-all:hover {
      background: var(--t-bg-hover);
    }

    .el-aside .category-all.is-active {
      background: var(--t-bg-active);
      color: var(--el-color-primary);
    }

    .el-aside .category-all::after {
      content: '';
      position: absolute;
      right: 9px;
      bottom: 0;
      width: 138px;
      height: 1px;
      background: var(--sa-space);
    }

    .el-aside .el-tree {
      --el-tree-node-content-height: 40px;
      --el-tree-node-hover-bg-color: var(--t-bg-hover);
    }

    .el-aside .el-tree > .el-tree-node > .el-tree-node__content {
      --el-tree-node-content-height: 54px;
      align-items: flex-start;
      position: relative;
    }

    .el-aside .el-tree > .el-tree-node > .el-tree-node__content::after {
      content: '';
      position: absolute;
      right: 9px;
      bottom: 0;
      width: 138px;
      height: 1px;
      background: var(--sa-space);
    }

    .el-aside .el-tree .el-tree-node__content {
      /* align-items: flex-start; */
      padding-top: 6px;
      border-radius: 4px;
    }

    .el-aside .el-tree .name {
      line-height: 20px;
      font-size: 14px;
      color: var(--sa-font);
    }

    .el-aside .el-tree .goods {
      line-height: 16px;
      font-size: 12px;
      color: var(--sa-subfont);
    }

    .el-aside .el-tree:not(.all) .el-tree-node.is-current > .el-tree-node__content {
      background: var(--t-bg-active);
    }

    .el-aside
      .el-tree:not(.all)
      .el-tree-node.is-current
      > .el-tree-node__content
      .el-tree-node__expand-icon {
      color: var(--el-color-primary);
    }

    .el-aside .el-tree:not(.all) .el-tree-node.is-current > .el-tree-node__content .name {
      color: var(--el-color-primary);
    }

    .el-aside .el-tree:not(.all) .el-tree-node.is-current > .el-tree-node__content .goods {
      color: var(--el-color-primary);
    }
    .goods-index-footer {
      --el-footer-height: fit-content;
    }
  }
</style>
